import { Loader } from "lucide-react"; // 导入加载指示器组件
import { InfoSkeleton } from "./info"; // 导入信息骨架屏组件
import { ParticipantsSkeleton } from "./participants"; // 导入参与者骨架屏组件
import { ToolbarSkeleton } from "./toolbar"; // 导入工具栏骨架屏组件

/**
 * 加载中页面组件
 * 此组件用于在数据加载时显示一个加载指示器和骨架屏，以提供给用户明确的视觉反馈
 * 
 * @returns {JSX.Element} 加载中页面的JSX元素
 */
export const Loading = () => {
  return (
    <main
      className="h-full w-full relative bg-neutral-100 touch-none
    flex items-center justify-center"
    >
      <Loader className="h-6 w-6 text-muted-foreground animate-spin" /> {/* 显示加载指示器，使用spin动画表示加载状态 */}
      <InfoSkeleton /> {/* 信息骨架屏，占位符 */}
      <ParticipantsSkeleton /> {/* 参与者骨架屏，占位符 */}
      <ToolbarSkeleton /> {/* 工具栏骨架屏，占位符 */}
    </main>
  );
};